import { Component } from 'react'
import Taro from '@tarojs/taro'
import {View } from '@tarojs/components'
import './index.scss'

export default class LgSwitch extends Component {
  constructor () {
    super(...arguments)
    this.setVal = this.setVal.bind(this);
    this.getVal = this.getVal.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  state = {
    value: this.props.default ? true : false
  }
  setVal = value => {
    this.setState({ value: value })
  }
  getVal() {
    return this.state.value;
  }
  handleChange = value => {
    if (this.props.disabled) return;
    var that = this;
    this.setState({ value: !this.state.value }, function() {
      that.props.onClick && that.props.onClick(that.state.value);
    });
  }
  render () {
    var props = this.props; 
    var className = props.className || "", subStyle = {}, style = props.style || {};
    if (props.disabled) {
      className += " lg_switch_disable"
    } else if (this.state.value) 
      className += " lg_switch_open";
    if (props.height) {
      var subWidth = Taro.pxTransform(props.height - 6);
      if (this.state.value) {
        var left = props.width || 100;
        left = Taro.pxTransform(left - props.height - 9);
      } else {
        var left = Taro.pxTransform(3)
      }
      subStyle = {width: subWidth, height: subWidth, left: left};
      style.borderRadius = Taro.pxTransform(props.height / 2);
    }
    
    return (
      // <Switch className={"lg_switch " + className} checked={this.state.value} onClick={this.handleChange} style={style}/>
      <View className={"lg_switch " + className} onClick={this.handleChange} style={style}>
        <View className="sub_btn" style={subStyle}>
          <View className="sub_btn_radius"/>
        </View>
      </View>
    )
  }
}

// state = {
//   cla: " set_t_s_close"
// }
// setData() {
//   var cla = this.state.cla ? "" : " set_t_s_close";
//   this.setState({cla: cla});
//   this.props.setData && this.props.setData(cla);
// }
// setVal(type) {
//     var cla = type ? "" : " set_t_s_close";
//     if (cla != this.state.cla)
//         this.setState({cla: cla});
// }
// getVal() {
//     return this.state.cla;
// }
// render() {
//     if (this.state.cla) {
//         var style = {display: "none"}, style1 = {display: "block"};
//     } else {
//         var style1 = {display: "none"}, style = {display: "block"};
//     }
//     return (
//         <View className={"set_t_switch clear" + this.state.cla} onClick={this.setData} style={this.props.style || {}}>
//             <Text className="left" style={style}>ON</Text><Text className="right" style={style1}>OFF</Text>
//             <View/>
//         </View>
//     );
// }